<!--  -->
<template>
  <div>
    <h1>Vuex的使用案例</h1>
    <h2>当前的求和为:{{sum}}</h2>
    <select name=""
            v-model.number="n">
      <!-- v-model收集的n的值是字符串，可以用number限定符 -->
      <!-- 第二种解决办法:就是给value绑定v-bind:value,这样取到的值就是数字 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当为基数是加</button>
    <button @click="incrementWait">异步操作加法</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前的求和为；
      sum: 0,
      // 增加的步进
      n: 1,
    }
  },
  methods: {
    increment () {
      this.sum += this.n
    },
    decrement () {
      this.sum -= this.n;
    },
    incrementOdd () {
      if (this.sum % 2 != 0) {
        this.sum += this.n
      }
    },
    incrementWait () {
      setTimeout(() => {
        this.sum += this.n
      }, 1000)
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
</style>